<template>
  <div>
    <van-nav-bar
      title="问卷调差统计"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad">
        <van-card
          v-for="item in list" :key="item" :title="item"
          num="2"
          price="2.00"
          desc=item
          title=item+item
          thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
          @click="onClickCard()"/>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
export default {
  created() {
    this.$data.role = this.$route.query.role;
  },
  data() {
      return {
        role:-1,
        list: [],
        loading: false,
        finished: false,
        refreshing: false,
      };
    },
    methods: {
      onLoad() {
        setTimeout(() => {
          if (this.refreshing) {
            this.list = [];
            this.refreshing = false;
          }

          for (let i = 0; i < 10; i++) {
            this.list.push(this.list.length + 1);
          }
          this.loading = false;

          if (this.list.length >= 40) {
            this.finished = true;
          }
        }, 1000);
      },
      onRefresh() {
        // 清空列表数据
        this.finished = false;

        // 重新加载数据
        // 将 loading 设置为 true，表示处于加载状态
        this.loading = true;
        this.onLoad();
      },
      onClickLeft() {
        this.$router.push({path:'/home',query:{role:this.$data.role}})
      },
      onClickCard() {
        this.$router.push({path:'/qaDetail',query:{role:this.$data.role}})
      }
    },
}
</script>

<style>
</style>
